<template>
  <a-modal
    :width="modalWidth"
    :title="title"
    :visible="visible"
    :okText="okText"
    :cancelText="cancelText"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="modal-body" :style="{ maxHeight: modalMaxHeight + 'px' }">
      <slot></slot>
    </div>
    <template slot="footer">
      <a-button v-show="!hideFoot" @click="handleCancel"> {{ cancelText }} </a-button>
      <a-button v-show="!hideFoot" type="primary" @click="handleOk"> {{ okText }} </a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    modalWidth: {
      type: String,
      default: '720px',
    },
    modalMaxHeight: {
      type: String,
      default: '540',
    },
    title: {
      type: String,
      default: '',
    },
    hideFoot: {
      type: Boolean,
      default: false,
    },
    cancelText: {
      type: String,
      default: '取消',
    },
    okText: {
      type: String,
      default: '确定',
    },
  },
  data() {
    return {}
  },
  created() {},
  computed: {},
  mounted() {},
  methods: {
    // 点击确认按钮
    handleOk() {
      this.$emit('handleOk')
    },
    // 点击取消按钮
    handleCancel() {
      this.$emit('handleCancel')
    },
  },
}
</script>
<style lang="less" scoped>
.modal-body {
  overflow-y: scroll;
  overflow-x: hidden;
}
.modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
